import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { reqregister } from '../../http/api'
import { Button, Form, Input, Toast } from "antd-mobile"
import "./register.less"

export default class register extends Component {
  constructor() {
    super()
    this.state = {
      user: {
        phone: "",
        nickname: "",
        password: ""
      }
    }
  }

  changeUser(v, key) {
    this.setState({
      user: {
        ...this.state.user,
        [key]: v
      }
    })
  }
  // 注册
  async register() {
    let res =await reqregister(this.state.user)
    if (res.data.code === 200) {
      Toast.show({ content: res.data.msg })
      this.props.history.push("/login")
    }
  }


  render() {
    let { user } = this.state
    return (
      <div>
        <Header back title="注册"></Header>
        <div>user:{JSON.stringify(user)}</div>

        <Form layout='horizontal'>
          <Form.Item label='账号' name='phone'>
            <Input placeholder='请输入账号' clearable value={user.phone} onChange={v => this.changeUser(v, "phone")} />
          </Form.Item>
          <Form.Item label='用户名' name='nickname'>
            <Input placeholder='请输入用户名' clearable value={user.nickname} onChange={v => this.changeUser(v, "nickname")} />
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable value={user.password} onChange={v => this.changeUser(v, "password")} />
          </Form.Item>
        </Form>
        <Button block shape='rounded' color='primary' onClick={()=>this.register()}>
          注册
        </Button>

      </div>
    )
  }
}
